<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=1024, user-scalable=no">

  <title>Your deck.js Presentation</title>

  <!-- Required stylesheet -->
  <link rel="stylesheet" media="screen" href="core/deck.core.css">

  <!-- Extension CSS files go here. Remove or add as needed. -->
  <link rel="stylesheet" media="screen" href="extensions/goto/deck.goto.css">
  <link rel="stylesheet" media="screen" href="extensions/menu/deck.menu.css">
  <link rel="stylesheet" media="screen" href="extensions/navigation/deck.navigation.css">
  <link rel="stylesheet" media="screen" href="extensions/status/deck.status.css">
  <link rel="stylesheet" media="screen" href="extensions/scale/deck.scale.css">

  <!-- Style theme. More available in /themes/style/ or create your own. -->
  <link rel="stylesheet" media="screen" href="themes/style/web-2.0.css">

  <!-- Transition theme. More available in /themes/transition/ or create your own. -->
  <link rel="stylesheet" media="screen" href="themes/transition/horizontal-slide.css">

  <!-- Basic black and white print styles -->
  <link rel="stylesheet" media="print" href="core/print.css">

  <!-- Required Modernizr file -->
  <script src="modernizr.custom.js"></script>
</head>
<body>
  <div class="deck-container">

    <!-- Begin slides. Just make elements with a class of slide. -->

    <section class="slide">
      <h1>布局、定位与浮动</h1>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h3>Web前端开发背景与前景</h3>
        <h3>开发准备</h3>
        <h3>借鉴</h3>
        <h3>页面基本设定</h3>
        <h3>盒子模型与可视化模型</h3>
        <h3>定位Position：绝对定位/相对定位</h3>
        <h3>浮动Float</h3>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>与其他课程的关系</h2>

        <ol>
          <li><h3>静态网页设计</h3>
          </li>
          <li><h3>Web前端开发</h3>
          </li>
          <li><h3>Web应用开发</h3>
          </li>
        </ol>
        <img style="float:left" src="pic/relation.png">
      </div>
    </section>
    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>发展背景</h2>

        <ol>
          <li><h3>移动设备的长足发展与多尺寸屏幕的普及</h3>
          </li>
          <li><h3>HTML5的发展与Flash的溃败</h3>
          </li>
          <li><h3>从网页（Web Page)到应用(Application)</h3>
          </li>
          <li><h3>所有的这一切都让Web技术更专业化.</h3>
          </li>
          <li><h3>注意到本PPT了吗?为什么要这样做?</h3>
            <a href="http://bartaz.github.io/impress.js">更拽的</a>
            <br/>
            <a href="http://www.iteye.com/news/28756">更多的</a>
          </li>
        </ol>

      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>看看什么叫专业</h2>
        <ol>
          <li>
            <h3>Web前端开发相关术语</h3>
            <p>切图/切片  效果图  套页面  文案</p>
          </li>
          <li>
            <h3>Web前端开发工程与(Web)设计师的区别</h3>
            <p>设计成的psd与jpg</p>
            <p>套页面后的html</p>
          </li>
          <li>
            <h3>强烈建议大部分女生选择此方向</h3>
            以后也可以往设计设计师偏一点
          </li>
        </ol>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>工具与技术</h2>
        <ol>
          <li>
            <h3>Web前端专业制作工具</h3>
            <p>PS && AI</p>
            <p>Dreamweaver VS. Webstorm || HBuilder || ?</p>
          </li>
          <li>
            <h3>大量的HTML5制作工具</h3>
            <a href="http://www.vxplo.cn/">互动大师</a>
            <p>其他...您再搜搜？</p>
          </li>
          <li>
            <h3>HTML5 && CSS3 && Javascript</h3>
            <p>不提供教材,因为没有任何一本教材可以涵盖这么多内容,去图书馆借任何一本HTML5与CSS3的书</p>
            <p><a href="http://www.jikexueyuan.com/practice/">极客学院HTML5路径图</a></p>
            <p><a href="http://www.imooc.com/course/list?c=fe">慕课网前端开发</a></p>
            <p><a href="http://item.jd.com/11544535.html#comment">HTML5 移动Web开发实践详解</a></p>
          </li>
        </ol>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>Webstorm</h2>
        <ol>
          <li>
            <h3>实践面</h3>
            <p>下单页面</p>
            <p>旅游列表页面/旅游详情页面</p>
            <p>jQuery图片瀑布流</p>
            <p>游戏:看看你有多色 || 2048</p>
          </li>
          <li>
            <h3>技术面</h3>
            <p>HTML5/CSS3</p>
            <p>Javascript/underscore/jQuery</p>
          </li>
        </ol>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>实践检查</h2>
        <ol>
          <li>
            <h3>借阅书籍了没有?</h3>
          </li>
          <li>
            <h3>订单确认页面完成情况</h3>
          </li>
        </ol>
      </div>
    </section>


    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>开发准备</h2>
        <ol>
          <li>
            <h3>chrome浏览器</h3>
              手机浏览模式\二维码生成插件安装\二维码在线生成网站
          </li>
          <li>
            <h3>webstorm</h3>
            服务器端口与允许外部连接，项目编码utf8设定
          </li>
        </ol>
      </div>
    </section>
    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>从其他网站借鉴技术</h2>
        <ol>
          <li>
            <h3>如美团等大网站</h3>
          </li>

        </ol>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>页面基本设定</h2>
        <ol>
          <li>
            <h3>字符集</h3>
          </li><li>
          <h3>视口(viewpoint)设定</h3>
        </li><li>
          <h3>缩放(scalable)设定</h3>
          </li>
        </ol>
      </div>
    </section>


    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>盒子模型与可视化模型</h2>
        <ol>
          <li>
            <h3>盒子模型<a href="html5workspace/boxmodel.html"></a></h3>
          </li><li>
            <h3>可视化模型</h3>
          </li>
        </ol>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>定位Position</h2>
        <ol>
          <li>
            <h3>绝对定位</h3>
          </li><li>
          <h3>相对定位</h3>
          </li>
        </ol>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>浮动Float</h2>
        <ol>
          <li>
            <h3>左浮动与右浮动</h3>
          </li><li> <h3>清除浮动</h3>
        </li>
          <li> <h3><a href="html5workspace/floatlayout.html">浮动特性</a> </h3>
          </li>
          <li> <h3><a href="html5workspace/float-layout2.html">浮动布局</a></h3>
          </li>
          <li> <h3><a>浮动布局</a></h3> </li>
        </ol>
      </div>
    </section>

    <h3></h3>



    <section class="slide">
      <h1>Thanks, You're dismissed!</h1>
    </section>


    <!-- End slides. -->

    <!-- Begin extension snippets. Add or remove as needed. -->

    <!-- deck.navigation snippet -->
    <div aria-role="navigation">
      <a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
      <a href="#" class="deck-next-link" title="Next">&#8594;</a>
    </div>

    <!-- deck.status snippet -->
    <p class="deck-status" aria-role="status">
      <span class="deck-status-current"></span>
      /
      <span class="deck-status-total"></span>
    </p>

    <!-- deck.goto snippet -->
    <form action="." method="get" class="goto-form">
      <label for="goto-slide">Go to slide:</label>
      <input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
      <datalist id="goto-datalist"></datalist>
      <input type="submit" value="Go">
    </form>

    <!-- End extension snippets. -->
  </div>

<!-- Required JS files. -->
<script src="jquery-1.11.3.js"></script>
<script src="core/deck.core.js"></script>

<!-- Extension JS files. Add or remove as needed. -->
<script src="extensions/menu/deck.menu.js"></script>
<script src="extensions/goto/deck.goto.js"></script>
<script src="extensions/status/deck.status.js"></script>
<script src="extensions/navigation/deck.navigation.js"></script>
<script src="extensions/scale/deck.scale.js"></script>

<!-- Initialize the deck. You can put this in an external file if desired. -->
<script>
  $(function() {
    $.deck('.slide');
  });
</script>
</body>
</html>
